<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | 文档</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <!-- Logo -->
        <a href="../index2.html" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>A</b>LT</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">切换导航</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li><a href="http://roncoo.com">龙果技术团队</a></li>
              <li><a href="http://almsaeedstudio.com/premium">adminLTE</a></li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <div class="sidebar" id="scrollspy">

          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="nav sidebar-menu">
            <li class="header">TABLE OF CONTENTS</li>
            <li class="active"><a href="#introduction"><i class="fa fa-circle-o"></i> 简介</a></li>
            <li><a href="#download"><i class="fa fa-circle-o"></i> 下载</a></li>
            <li><a href="#dependencies"><i class="fa fa-circle-o"></i> 依赖</a></li>
            <li><a href="#advice"><i class="fa fa-circle-o"></i> 建议</a></li>
            <li><a href="#layout"><i class="fa fa-circle-o"></i> 布局</a></li>
            <li><a href="#adminlte-options"><i class="fa fa-circle-o"></i> Javascript 选项</a></li>
            <li class="treeview" id="scrollspy-components">
              <a href="javascript:void(0)"><i class="fa fa-circle-o"></i> 组件</a>
              <ul class="nav treeview-menu">
                <li><a href="#component-main-header">主标题</a></li>
                <li><a href="#component-sidebar">侧边栏</a></li>
                <li><a href="#component-control-sidebar">控制栏</a></li>
                <li><a href="#component-info-box">信息盒</a></li>
                <li><a href="#component-box">盒子</a></li>
                <li><a href="#component-direct-chat">在线聊天</a></li>
              </ul>
            </li>
            <li><a href="#plugins"><i class="fa fa-circle-o"></i> 插件</a></li>
            <li><a href="#upload"><i class="fa fa-circle-o"></i> 更新日志</a></li>
            <li><a href="#browsers"><i class="fa fa-circle-o"></i>浏览器支持</a></li>
            <li><a href="#upgrade"><i class="fa fa-circle-o"></i>升级指南</a></li>
            <li><a href="#implementations"><i class="fa fa-circle-o"></i> 实现</a></li>
            <li><a href="#faq"><i class="fa fa-circle-o"></i> 常见问题</a></li>
            <li><a href="#license"><i class="fa fa-circle-o"></i> 开源许可</a></li>
          </ul>
        </div>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">

        <!-- Main content -->
        <div class="content body">
        <!-- Content Header (Page header) -->
        <div class="content-header">
          <h1>
            AdminLTE 文档
            <small>当前版本 2.3.0</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">文档</li>
          </ol>
        </div>

<section id="introduction">
  <h2 class="page-header"><a href="#introduction">简介</a></h2>
  <p class="lead">
    <b>AdminLTE</b> 是一个流行的开源Web应用后台管理模板。
    这是一个响应式的HTML模板，基于CSS框架的Bootstrap 3.
    它使用了所有的 Bootstrap 组件在其设计和风格上使用了许多常用的插件来创建一个一致的设计，可以作为一个用户界面的后端应用程序。
    AdminLTE 是基于模块化的设计，这允许它可以很容易地定制和构建， 这份文件将指导你通过
安装模板，并探索与模板绑定的各种组件。
  </p>
  <p>
    <b>RonCoo AdminLTE</b> --是一个完全响应式的免费开源后台管理模板。基于 AdminLTE 框架（后续会随着版本更新而更新）;使用jQuery 2.2.3版本，并引入很多优秀的第三方jQuery插件，开发者也可以改用自己熟悉的第三方插件,易于使用，并高度可定制，适合许多屏幕分辨率从小型移动设备到大型台式机，这是国内的开源模板未支持的。
  </p>
</section><!-- /#introduction -->


<!-- ============================================================= -->

<section id="download">
  <h2 class="page-header"><a href="#download">Download</a></h2>
  <p class="lead">
    RonCoo AdminLTE 官方提供两种不同的版本下载，每个人不同的技能水平和使用情况。
  </p>
  <p>在线预览：<a href="http://demo.adminlte.roncoo.com">demo.adminlte.roncoo.com</a> </p>
  <div class="row">
    <div class="col-sm-6">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Ready</h3>
          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
        </div><!-- /.box-header -->
        <div class="box-body">
          <p>编译并准备在生产中使用。全部引用压缩编译后的js和css等静态资源文件，去除多余的源文件，如果你不想自定义RonCoo adminLTE或二次开发 ,下载这个版本</p>
          <a href="http://almsaeedstudio.com/download/AdminLTE-dist" class="btn btn-primary"><i class="fa fa-download"></i> Download</a>
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div><!-- /.col -->
    <div class="col-sm-6">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">Source Code</h3>
          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
        </div><!-- /.box-header -->
        <div class="box-body">
          <p>包含整套模板所有的文件包括js源文件和LESS源文件等。如果您计划自定义模板或做二次开发，就下载这个版本。 <b>需要引入LESS编译器。</b></p>
          <a href="http://almsaeedstudio.com/download/AdminLTE" class="btn btn-danger"><i class="fa fa-download"></i> Download</a>
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <pre class="hierarchy bring-up"><code class="language-bash" data-lang="bash"> 龙果版本文件层次结构的源代码包

AdminLTE/
├── dist/
│   ├── CSS/
│   ├── JS
│   ├── fonts
│   ├── img
├── build/
│   ├── less/
│   │   ├── AdminLTE's Less 文件
│   ├── fonts/
│   │   ├── AdminLTE's 字体 文件
│   ├── js/
│   │   ├── AdminLTE's javascript 文件
│   ├── img/
│   │   ├── AdminLTE's image 文件
│   └── Bootstrap-less/ (Only for reference. No modifications have been made)
│       ├── mixins/
│       ├── variables.less
│       ├── mixins.less
└── plugins/
    ├── 所有的自定义插件的CSS和JS文件</code></pre>
 
</section>


<!-- ============================================================= -->

<section id="dependencies">
  <h2 class="page-header"><a href="#dependencies">依赖</a></h2>
  <p class="lead">AdminLTE 基于两个主要框架。
    下载的包中包含这两个库，所以您不必手动下载它们。</p>
  <ul class="bring-up">
    <li><a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a></li>
    <li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
    <li><a href="#plugins">所有其他插件都列在下面</a></li>
  </ul>
</section>


<!-- ============================================================= -->

<section id="advice">
  <h2 class="page-header"><a href="#advice">这里给出一个建议</a></h2>
  <p class="lead">
    在你去看你的新的令人敬畏的主题之前，这里有一些关于如何熟悉它的技巧：
  </p>

  <ul>
    <li><b>AdminLTE 是基于 <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>.</b> 如果你不熟悉 Bootstrap, 请浏览他们的网站并阅读文档。 所有 Bootstrap 组件已被修改，以适应AdminLTE风格和整个模板提供一致的外观。 这样，我们保证你会得到最好的 AdminLTE。</li>
    <li><b>通过主题捆绑的页面。</b> 大多数模板示例页都包含如何创建或使用一个组件的快捷提示，当你需要创建一些东西时，它可以非常有用的。</li>
    <li><b>文档。</b> 我们正在努力与AdminLTE让你体验流畅。实现这一途径的一种方法是提供文档和支持。如果你认为文档中缺少了一些东西，请不要犹豫，创建一个问题，告诉我们关于它的问题。</li>
    <li><b>建立 <a href="http://lesscss.org/" target="_blank">LESS</a>.</b> 这个主题使用LESS编译器，使它更容易定制和使用。如果你知道CSS或SASS的话LESS非常容易学。这是没有必要的专门学习，但它会受益于你很多在未来。</li>
    <li><b>托管在<a href="https://github.com/almasaeed2010/AdminLTE/" target="_blank">GitHub</a>.</b> 访问我们的GitHub库中查看问题，提出要求，或有助于工程。</li>
  </ul>
  <p>
    <b>注:</b> LESS 文件比直接编写CSS文件更好编写。
  </p>
</section>


<!-- ============================================================= -->

<section id="layout">
  <h2 class="page-header"><a href="#layout">布局</a></h2>
  <p class="lead">布局由四个主要部分组成，龙果团队更具需求又新增了一个：</p>
  <ul>
    <li>Wrapper <code>.wrapper</code>. 一个div包裹整个网站。</li>
    <li>Main Header <code>.main-header</code>. 包含标志和导航栏。</li>
    <li>Sidebar <code>.sidebar-wrapper</code>. 包含用户面板和侧边栏菜单。</li>
    <li>Content <code>.content-wrapper</code>. 包含页面标题和内容。</li>
  </ul>
  <div class="callout callout-danger lead">
    <h4>Tip!</h4>
    <p>如果你想从头开始，<a href="../starter.html">启动页面</a> 是一个很好的地方开始建立你的应用程序。</p>
  </div>

  <h3>布局选项</h3>
  <p class="lead">AdminLTE 2.0 提供了一组选项适用于您的主要布局。这些类中的每一个都可以添加
到身体标签，以获得所需的目标。</p>
  <ul>
    <li><b>固定:</b> 使用类 <code>.fixed</code> 得到固定的头和侧边栏。</li>
    <li><b>迷你侧边栏:</b> 使用类 <code>.sidebar-collapse</code> 有一个迷你的侧边栏在加载。</li>
    <li><b>盒装布局:</b> 使用类 <code>.layout-boxed</code>得到一个盒装布局延伸，只有1250px.</li>
    <li><b>顶部导航：</b> 使用类 <code>.layout-top-nav</code>去除侧边栏，只剩下顶部导航栏</li>
    <li><b>异步加载：</b> 使用类 <code>.fixed.ajax-template</code>基于固定布局，内容页使用异步加载的形式加载，不再跳转页面</li>
  </ul>
  <p><b>注:</b> 您不能同时使用装箱和固定两个布局。其他任何东西都可以混合在一起，<code>异步加载是龙果新增的一种基于固定的布局</code></p>

  <h3>皮肤</h3>
  <p class="lead">皮肤可以在 dist/css/skins 文件夹查看。
    选择要添加的皮肤文件，然后添加适当的
类到body标签，以改变模板的外观。这里是可用的皮肤列表：</p>
  <div class="box box-solid" style="max-width: 300px;">
    <div class="box-body no-padding">
      <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
        <thead>
          <tr>
            <th style="width: 210px;">Skin Class</th>
            <th>预览</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>skin-blue</code></td>
            <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-blue-light</code></td>
            <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-yellow</code></td>
            <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-yellow-light</code></td>
            <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-green</code></td>
            <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-green-light</code></td>
            <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-purple</code></td>
            <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-purple-light</code></td>
            <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-red</code></td>
            <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-red-light</code></td>
            <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-black</code></td>
            <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-black-light</code></td>
            <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.box-body -->
  </div><!-- /.box -->
</section>


<!-- ============================================================= -->

<section id="adminlte-options">
  <h2 class="page-header"><a href="#adminlte-options">AdminLTE Javascript 选项</a></h2>
  <p class="lead">修改AdminLTE app.js选项可以使用下列方式之一。</p>

  <h3>编辑 app.js</h3>
  <p>在主要的JavaScript文件，修改<code>$.AdminLTE.options</code> 对象，以适合您的用例。</p>

  <h3>定义 AdminLTE 选项</h3>
  <p>Alternatively, 您可以定义一个名为<code>AdminLTEOptions</code>初始化前加载app.js。</p>
  <p>例子</p>
  <pre class="prettyprint"><code class="html">&LT;script>
  var AdminLTEOptions = {
    //使侧边栏扩展徘徊侧边栏迷你效果
    //这个选项是被迫如果真的固定布局和侧边栏迷你
    //一起使用
    sidebarExpandOnHover: true,
    //BoxRefresh Plugin
    enableBoxRefresh: true,
    //Bootstrap.js tooltip
    enableBSToppltip: true
  };
&LT;/script>
&LT;script src="dist/js/app.js" type="text/javascript">&LT;/script></code></pre>

  <h3>Available AdminLTE Options</h3>
  <pre class="prettyprint"><code class="javascript">{
  //Add slimscroll to navbar menus
  //This requires you to load the slimscroll plugin
  //in every page before app.js
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
  navbarMenuHeight: "200px", //The height of the inner menu
  //General animation speed for JS animated elements such as box collapse/expand and
  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
  //'fast', 'normal', or 'slow'
  animationSpeed: 500,
  //Sidebar push menu toggle button selector
  sidebarToggleSelector: "[data-toggle='offcanvas']",
  //Activate sidebar push menu
  sidebarPushMenu: true,
  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
  sidebarSlimScroll: true,
  //Enable sidebar expand on hover effect for sidebar mini
  //This option is forced to true if both the fixed layout and sidebar mini
  //are used together
  sidebarExpandOnHover: false,
  //BoxRefresh Plugin
  enableBoxRefresh: true,
  //Bootstrap.js tooltip
  enableBSToppltip: true,
  BSTooltipSelector: "[data-toggle='tooltip']",
  //Enable Fast Click. Fastclick.js creates a more
  //native touch experience with touch devices. If you
  //choose to enable the plugin, make sure you load the script
  //before AdminLTE's app.js
  enableFastclick: true,
  //Control Sidebar Options
  enableControlSidebar: true,
  controlSidebarOptions: {
    //Which button should trigger the open/close event
    toggleBtnSelector: "[data-toggle='control-sidebar']",
    //The sidebar selector
    selector: ".control-sidebar",
    //Enable slide over content
    slide: true
  },
  //Box Widget Plugin. Enable this plugin
  //to allow boxes to be collapsed and/or removed
  enableBoxWidget: true,
  //Box Widget plugin options
  boxWidgetOptions: {
    boxWidgetIcons: {
      //Collapse icon
      collapse: 'fa-minus',
      //Open icon
      open: 'fa-plus',
      //Remove icon
      remove: 'fa-times'
    },
    boxWidgetSelectors: {
      //Remove button selector
      remove: '[data-widget="remove"]',
      //Collapse button selector
      collapse: '[data-widget="collapse"]'
    }
  },
  //Direct Chat plugin options
  directChat: {
    //Enable direct chat by default
    enable: true,
    //The button to open and close the chat contacts pane
    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  },
  //Define the set of colors to use globally around the website
  colors: {
    lightBlue: "#3c8dbc",
    red: "#f56954",
    green: "#00a65a",
    aqua: "#00c0ef",
    yellow: "#f39c12",
    blue: "#0073b7",
    navy: "#001F3F",
    teal: "#39CCCC",
    olive: "#3D9970",
    lime: "#01FF70",
    orange: "#FF851B",
    fuchsia: "#F012BE",
    purple: "#8E24AA",
    maroon: "#D81B60",
    black: "#222222",
    gray: "#d2d6de"
  },
  //The standard screen sizes that bootstrap uses.
  //If you change these in the variables.less file, change
  //them here too.
  screenSizes: {
    xs: 480,
    sm: 768,
    md: 992,
    lg: 1200
  }
}</code></pre>
</section>


<!-- ============================================================= -->

<section id="components" data-spy="scroll" data-target="#scrollspy-components">
  <h2 class="page-header"><a href="#components">组件</a></h2>
  <div class="callout callout-info lead">
    <h4>提醒!</h4>
    <p>
      AdminLTE 使用 Bootstrap 3 组件。 使用前最好查看 <a href="http://getbootstrap.com">Bootstrap 文档</a> 此文档不包括各种组件的文档。
    </p>
  </div>
  <div class="callout callout-danger lead">
    <h4>Tip!</h4>
    <p>
      如果您通过示例页，并想复制一个组件，右键单击
组件并选择“检查元素”比查看HTML页面更便捷。
    </p>
  </div>
  <h3 id="component-main-header">主导航</h3>
  <p class="lead">主导航包含标志和导航栏。建设的
导航栏略有不同，因为它的组件，自举引导不提供。
导航栏中可以有两种方式构造。本例为正常的导航栏和下一步我们将提供一个例子
顶部的导航布局。</p>
  <div class="box box-solid">
    <div class="box-body" style="position: relative;">
      <span class="eg">主导航例子</span>
      <header class="main-header" style="position: relative;">
        <!-- Logo -->
        <a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" role="button">
            <span class="sr-only">切换导航</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
              <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-envelope-o"></i>
                  <span class="label label-success">4</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有4个消息</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li><!-- start message -->
                        <a href="#">
                          <div class="pull-left">
                            <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            团队
                            <small><i class="fa fa-clock-o"></i> 5 分钟</small>
                          </h4>
                          <p>为什么不买一个新的主题?</p>
                        </a>
                      </li><!-- end message -->
                    </ul>
                  </li>
                  <li class="footer"><a href="#">看到所有的消息</a></li>
                </ul>
              </li>
              <!-- Notifications: style can be found in dropdown.less -->
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="label label-warning">10</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有10个通知</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <i class="fa fa-users text-aqua"></i> 今天有 5 新成员加入
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer"><a href="#">显示全部</a></li>
                </ul>
              </li>
              <!-- Tasks: style can be found in dropdown.less -->
              <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-flag-o"></i>
                  <span class="label label-danger">9</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有9个任务</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li><!-- Task item -->
                        <a href="#">
                          <h3>
                            设计一些按钮
                            <small class="pull-right">20%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">20% 完成</span>
                            </div>
                          </div>
                        </a>
                      </li><!-- end task item -->
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有任务</a>
                  </li>
                </ul>
              </li>
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                  <span class="hidden-xs">龙果管理员</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- User image -->
                  <li class="user-header">
                    <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    <p>
                      龙果管理员 - 超级管理员
                      <small>2012年12月加入</small>
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                    <div class="col-xs-4 text-center">
                      <a href="#">下属</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">销售额</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">粉丝</a>
                    </div>
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-default btn-flat">简况</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-default btn-flat">退出</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </header>
    </div>
  </div>
  <pre class="prettyprint">&LT;header class="main-header">
  &LT;a href="../../index2.html" class="logo">
    &LT;!-- LOGO -->
    AdminLTE
  &LT;/a>
  &LT;!-- Header Navbar: style can be found in header.less -->
  &LT;nav class="navbar navbar-static-top" role="navigation">
    &LT;!-- Navbar Right Menu -->
    &LT;div class="navbar-custom-menu">
      &LT;ul class="nav navbar-nav">
        &LT;!-- Messages: style can be found in dropdown.less-->
        &LT;li class="dropdown messages-menu">
          &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
            &LT;i class="fa fa-envelope-o">&LT;/i>
            &LT;span class="label label-success">4&LT;/span>
          &LT;/a>
          &LT;ul class="dropdown-menu">
            &LT;li class="header">You have 4 messages&LT;/li>
            &LT;li>
              &LT;!-- inner menu: contains the actual data -->
              &LT;ul class="menu">
                &LT;li>&LT;!-- start message -->
                  &LT;a href="#">
                    &LT;div class="pull-left">
                      &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    &LT;/div>
                    &LT;h4>
                      Sender Name
                      &LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 mins&LT;/small>
                    &LT;/h4>
                    &LT;p>Message Excerpt&LT;/p>
                  &LT;/a>
                &LT;/li>&LT;!-- end message -->
                ...
              &LT;/ul>
            &LT;/li>
            &LT;li class="footer">&LT;a href="#">See All Messages&LT;/a>&LT;/li>
          &LT;/ul>
        &LT;/li>
        &LT;!-- Notifications: style can be found in dropdown.less -->
        &LT;li class="dropdown notifications-menu">
          &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
            &LT;i class="fa fa-bell-o">&LT;/i>
            &LT;span class="label label-warning">10&LT;/span>
          &LT;/a>
          &LT;ul class="dropdown-menu">
            &LT;li class="header">You have 10 notifications&LT;/li>
            &LT;li>
              &LT;!-- inner menu: contains the actual data -->
              &LT;ul class="menu">
                &LT;li>
                  &LT;a href="#">
                    &LT;i class="ion ion-ios-people info">&LT;/i> Notification title
                  &LT;/a>
                &LT;/li>
                ...
              &LT;/ul>
            &LT;/li>
            &LT;li class="footer">&LT;a href="#">View all&LT;/a>&LT;/li>
          &LT;/ul>
        &LT;/li>
        &LT;!-- Tasks: style can be found in dropdown.less -->
        &LT;li class="dropdown tasks-menu">
          &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
            &LT;i class="fa fa-flag-o">&LT;/i>
            &LT;span class="label label-danger">9&LT;/span>
          &LT;/a>
          &LT;ul class="dropdown-menu">
            &LT;li class="header">You have 9 tasks&LT;/li>
            &LT;li>
              &LT;!-- inner menu: contains the actual data -->
              &LT;ul class="menu">
                &LT;li>&LT;!-- Task item -->
                  &LT;a href="#">
                    &LT;h3>
                      Design some buttons
                      &LT;small class="pull-right">20%&LT;/small>
                    &LT;/h3>
                    &LT;div class="progress xs">
                      &LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                        &LT;span class="sr-only">20% Complete&LT;/span>
                      &LT;/div>
                    &LT;/div>
                  &LT;/a>
                &LT;/li>&LT;!-- end task item -->
                ...
              &LT;/ul>
            &LT;/li>
            &LT;li class="footer">
              &LT;a href="#">View all tasks&LT;/a>
            &LT;/li>
          &LT;/ul>
        &LT;/li>
        &LT;!-- User Account: style can be found in dropdown.less -->
        &LT;li class="dropdown user user-menu">
          &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
            &LT;img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
            &LT;span class="hidden-xs">Alexander Pierce&LT;/span>
          &LT;/a>
          &LT;ul class="dropdown-menu">
            &LT;!-- User image -->
            &LT;li class="user-header">
              &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
              &LT;p>
                Alexander Pierce - Web Developer
                &LT;small>Member since Nov. 2012&LT;/small>
              &LT;/p>
            &LT;/li>
            &LT;!-- Menu Body -->
            &LT;li class="user-body">
              &LT;div class="col-xs-4 text-center">
                &LT;a href="#">Followers&LT;/a>
              &LT;/div>
              &LT;div class="col-xs-4 text-center">
                &LT;a href="#">Sales&LT;/a>
              &LT;/div>
              &LT;div class="col-xs-4 text-center">
                &LT;a href="#">Friends&LT;/a>
              &LT;/div>
            &LT;/li>
            &LT;!-- Menu Footer-->
            &LT;li class="user-footer">
              &LT;div class="pull-left">
                &LT;a href="#" class="btn btn-default btn-flat">Profile&LT;/a>
              &LT;/div>
              &LT;div class="pull-right">
                &LT;a href="#" class="btn btn-default btn-flat">Sign out&LT;/a>
              &LT;/div>
            &LT;/li>
          &LT;/ul>
        &LT;/li>
      &LT;/ul>
    &LT;/div>
  &LT;/nav>
&LT;/header></pre>
  <h4>顶部导航布局。主标题的例子</h4>
  <div class="callout callout-info lead">
    <h4>提醒!</h4>
    <p>要使用这个主头，而不是常规的, 你需要添加<code>layout-top-nav</code> 类到body标签</p>
  </div>
  <div class="box box-solid">
    <div class="box-body layout-top-nav">
      <span class="eg">顶部导航的例子</span>
      <header class="main-header">
        <nav class="navbar navbar-static-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                <i class="fa fa-bars"></i>
              </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
                </div>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </header>
    </div>
  </div>
  <pre class="prettyprint">
&LT;header class="main-header">
  &LT;nav class="navbar navbar-static-top">
    &LT;div class="container-fluid">
    &LT;div class="navbar-header">
      &LT;a href="../../index2.html" class="navbar-brand">&LT;b>Admin&LT;/b>LTE&LT;/a>
      &LT;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        &LT;i class="fa fa-bars">&LT;/i>
      &LT;/button>
    &LT;/div>

    &LT;!-- Collect the nav links, forms, and other content for toggling -->
    &LT;div class="collapse navbar-collapse" id="navbar-collapse">
      &LT;ul class="nav navbar-nav">
        &LT;li class="active">&LT;a href="#">Link &LT;span class="sr-only">(current)&LT;/span>&LT;/a>&LT;/li>
        &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
        &LT;li class="dropdown">
          &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
          &LT;ul class="dropdown-menu" role="menu">
            &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
            &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
            &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
            &LT;li class="divider">&LT;/li>
            &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
            &LT;li class="divider">&LT;/li>
            &LT;li>&LT;a href="#">One more separated link&LT;/a>&LT;/li>
          &LT;/ul>
        &LT;/li>
      &LT;/ul>
      &LT;form class="navbar-form navbar-left" role="search">
        &LT;div class="form-group">
          &LT;input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
        &LT;/div>
      &LT;/form>
      &LT;ul class="nav navbar-nav navbar-right">
        &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
        &LT;li class="dropdown">
          &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
          &LT;ul class="dropdown-menu" role="menu">
            &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
            &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
            &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
            &LT;li class="divider">&LT;/li>
            &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
          &LT;/ul>
        &LT;/li>
      &LT;/ul>
    &LT;/div>&LT;!-- /.navbar-collapse -->
    &LT;/div>&LT;!-- /.container-fluid -->
  &LT;/nav>
&LT;/header></pre>

  <!-- ===================================================================== -->

  <h3 id="component-sidebar">侧边栏</h3>
  <p class="lead">
  下面提供一个左边侧栏的例子，用于建设侧边栏。
  </p>
  <pre class="prettyprint">
&LT;div class="main-sidebar">
  &LT;!-- Inner sidebar -->
  &LT;div class="sidebar">
    &LT;!-- user panel (Optional) -->
    &LT;div class="user-panel">
      &LT;div class="pull-left image">
        &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
      &LT;/div>
      &LT;div class="pull-left info">
        &LT;p>User Name&LT;/p>

        &LT;a href="#">&LT;i class="fa fa-circle text-success">&LT;/i> Online&LT;/a>
      &LT;/div>
    &LT;/div>&LT;!-- /.user-panel -->

    &LT;!-- Search Form (Optional) -->
    &LT;form action="#" method="get" class="sidebar-form">
      &LT;div class="input-group">
        &LT;input type="text" name="q" class="form-control" placeholder="Search...">
        &LT;span class="input-group-btn">
          &LT;button type="submit" name="search" id="search-btn" class="btn btn-flat">&LT;i class="fa fa-search">&LT;/i>&LT;/button>
        &LT;/span>
      &LT;/div>
    &LT;/form>&LT;!-- /.sidebar-form -->

    &LT;!-- Sidebar Menu -->
    &LT;ul class="sidebar-menu">
      &LT;li class="header">HEADER&LT;/li>
      &LT;!-- Optionally, you can add icons to the links -->
      &LT;li class="active">&LT;a href="#">&LT;span>Link&LT;/span>&LT;/a>&LT;&LT;/li>
      &LT;li>&LT;a href="#">&LT;span>Another Link&LT;/span>&LT;/a>&LT;/li>
      &LT;li class="treeview">
        &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
        &LT;ul class="treeview-menu">
          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
        &LT;/ul>
      &LT;/li>
    &LT;/ul>&LT;!-- /.sidebar-menu -->

  &LT;/div>&LT;!-- /.sidebar -->
&LT;/div>&LT;!-- /.main-sidebar --></pre>

  <h3 id="component-control-sidebar">控制栏</h3>
  <p class="lead">控制工具条右侧栏。它可以用于许多用途，是非常容易
创建的。侧边栏有两个不同的显示/隐藏方式。第一个允许侧边栏
幻灯片内容。第二推动内容的侧边栏的空间。无论是
那一种方法都可以通过<a href="#adminlte-options">Javascript options</a>设置。</p>
  <p class="lead">下面的代码应该放在<code>.wrapper</code> div. 我喜欢
将它放置在footer后。</p>
  <p class="lead">暗色的侧边栏标记</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-dark">
  &LT;!-- Content of the sidebar goes here -->
&LT;/aside>
&LT;!-- The sidebar's background -->
&LT;!-- This div must placed right after the sidebar for it to work-->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre>

  <p class="lead">亮色的擦边栏标记</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-light">
  &LT;!-- Content of the sidebar goes here -->
&LT;/aside>
&LT;!-- The sidebar's background -->
&LT;!-- This div must placed right after the sidebar for it to work-->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre>

  <p class="lead">一旦你创建工具，你将需要一个切换按钮打开/关闭它。
通过添加属性<code>data-toggle="control-sidebar"</code>的按钮，它会
自动作为切换按钮。</p>

  <p class="lead">切换按钮的例子</p>
  <button class="btn btn-primary" data-toggle="control-sidebar">切换右侧边栏</button><br><br>

  <p class="lead">侧边栏切换标记</p>
  <pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">切换右侧边栏&LT;/button></code></pre>
  <!-- ===================================================================== -->

  <h3 id="component-info-box">信息盒</h3>
  <p class="lead">用于显示统计片断信息框。有两种类型的信息框。</p>
  <h4>第一类信息框</h4>
  <!-- Info Boxes -->
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">信息</span>
          <span class="info-box-number">1,410</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">书签</span>
          <span class="info-box-number">410</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">上传</span>
          <span class="info-box-number">13,648</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">喜欢</span>
          <span class="info-box-number">93,139</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">标记</p>
  <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
  &LT;!-- Apply any bg-* class to to the icon to color it -->
  &LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
  &LT;div class="info-box-content">
    &LT;span class="info-box-text">Likes&LT;/span>
    &LT;span class="info-box-number">93,139&LT;/span>
  &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --></code></pre>

  <h4>第二类信息框</h4>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-aqua">
        <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">书签</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            30天增加70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-green">
        <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">喜欢</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            30天增加70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-yellow">
        <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">事件</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            30天增加70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-red">
        <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">评论</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            30天增加70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">标记</p>
  <pre class="prettyprint"><code class="lang-html">&LT;!-- Apply any bg-* class to to the info-box to color it -->
&LT;div class="info-box bg-red">
  &LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
  &LT;div class="info-box-content">
    &LT;span class="info-box-text">Likes&LT;/span>
    &LT;span class="info-box-number">41,410&LT;/span>
    &LT;!-- The progress section is optional -->
    &LT;div class="progress">
      &LT;div class="progress-bar" style="width: 70%">&LT;/div>
    &LT;/div>
    &LT;span class="progress-description">
      70% Increase in 30 Days
    &LT;/span>
  &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --></code></pre>
  <p class="lead">你需要改变这些消息盒的风格只需要改变 bg_* 类。适用于任何bg_* 类图表本身，对于其他风格，将bg_* 类添加到info-box div即可。</p>
  <!-- ===================================================================== -->

  <h3 id="component-box">盒子</h3>
  <p class="lead">盒子组件是最广泛使用的组件，通过这个模板。你可以
用它来做任何从显示图表到只是块的文本。它有许多不同的
风格，我们将探讨如下。</p>
  <h4>默认盒子标记</h4>
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">默认盒子的例子</h3>
      <div class="box-tools pull-right">
        <!-- Buttons, labels, and many other things can be placed here! -->
        <!-- Here is a label for example -->
        <span class="label label-primary">标签</span>
      </div><!-- /.box-tools -->
    </div><!-- /.box-header -->
    <div class="box-body">
      盒子的body
    </div><!-- /.box-body -->
    <div class="box-footer">
      盒子的footer
    </div><!-- box-footer -->
  </div><!-- /.box -->
  <pre class="prettyprint">&LT;div class="box">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Default Box Example&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;!-- Buttons, labels, and many other things can be placed here! -->
      &LT;!-- Here is a label for example -->
      &LT;span class="label label-primary">Label&LT;/span>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
  &LT;div class="box-footer">
    The footer of the box
  &LT;/div>&LT;!-- box-footer -->
&LT;/div>&LT;!-- /.box --></pre>
  <h4>Box Variants</h4>
  <p class="lead">您可以添加任何上下文类来更改框的样式。</p>
  <div class="row">
    <div class="col-md-4">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">默认框的例子</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">主要框的例子</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">消息框的例子</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="clearfix"></div>
    <div class="col-md-4">
      <div class="box box-warning">
        <div class="box-header with-border">
          <h3 class="box-title">警告框的例子</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-success">
        <div class="box-header with-border">
          <h3 class="box-title">成功框的例子</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">危险框的例子</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
  </div><!-- /.row -->
  <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-primary">...&LT;/div>
&LT;div class="box box-info">...&LT;/div>
&LT;div class="box box-warning">...&LT;/div>
&LT;div class="box box-success">...&LT;/div>
&LT;div class="box box-danger">...&LT;/div></pre>

  <h4>固体盒</h4>
  <p class="lead">实体盒是展示盒的替代方法。
它们可以通过简单地将盒实体类添加到框组件来创建。
您也可以使用上下文类与您实体框。</p>
  <div class="row">
    <div class="col-md-4">
      <div class="box box-solid box-default">
        <div class="box-header">
          <h3 class="box-title">默认的实体框示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-primary">
        <div class="box-header">
          <h3 class="box-title">初级实体框实例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-info">
        <div class="box-header">
          <h3 class="box-title">消息实体框实例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="clearfix"></div>
    <div class="col-md-4">
      <div class="box box-solid box-warning">
        <div class="box-header">
          <h3 class="box-title">警告实体框实例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-success">
        <div class="box-header">
          <h3 class="box-title">成功实体框实例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-danger">
        <div class="box-header">
          <h3 class="box-title">危险实体箱实例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          这是框的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
  </div><!-- /.row -->
  <pre class="prettyprint">
&LT;div class="box box-solid box-default">...&LT;/div>
&LT;div class="box box-solid box-primary">...&LT;/div>
&LT;div class="box box-solid box-info">...&LT;/div>
&LT;div class="box box-solid box-warning">...&LT;/div>
&LT;div class="box box-solid box-success">...&LT;/div>
&LT;div class="box box-solid box-danger">...&LT;/div></pre>
  <h4>Box Tools</h4>
  <p class="lead">盒可以包含部署一个特定事件或提供简单信息的工具。下面的示例使用多个AdminLTE组件内的箱头。</p>
  <p>AdminLTE data-widget 属性提供了崩溃或被删除的框。按钮
放在放置在箱头中的箱中的工具。</p>
  <pre class="prettyprint">
&LT;!-- This will cause the box to be removed when clicked -->
&LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
&LT;!-- This will cause the box to collapse when clicked -->
&LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button></pre>
  <div class="row">
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">可折叠的</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Collapsable&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">可拆卸的</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Removable&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default collapsed-box">
        <div class="box-header with-border">
          <h3 class="box-title">可张开的</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default collapsed-box">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Expandable&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-plus">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
  </div><!-- /.row -->
  <p>我们还可以添加标签、徽章、分页，工具提示，输入框中的工具很多。下面是几个例子</p>
  <div class="row">
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">标签</h3>
          <div class="box-tools pull-right">
            <span class="label label-default">Some Label</span>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Labels&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;span class="label label-default">8 New Messages&LT;/span>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Input</h3>
          <div class="box-tools pull-right">
            <div class="has-feedback">
              <input type="text" class="form-control input-sm" placeholder="Search...">
              <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
            </div>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Input&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;div class="has-feedback">
        &LT;input type="text" class="form-control input-sm" placeholder="Search...">
        &LT;span class="glyphicon glyphicon-search form-control-feedback">&LT;/span>
      &LT;/div>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Tootips on buttons</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Tooltips on buttons&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
      &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    The body of the box
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p>
   如果您在文档中插入了一个框 <code>app.js</code> 被加载，你必须激活
/删除按钮显示调用 <code>.activateBox()</code>:
  </p>
  <pre class="prettyprint"><code class="html">&LT;script>
    $("#box-widget").activateBox();
&LT;/script></code></pre>

  <h4>Loading States</h4>
  <div class="row">
    <div class="col-md-6">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Loading state</h3>
        </div>
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
        <!-- Loading (remove the following to stop the loading)-->
        <div class="overlay">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
      </div><!-- /.box -->
    </div><!-- /.col -->

    <div class="col-md-6">
      <div class="box box-default box-solid">
        <div class="box-header with-border">
          <h3 class="box-title">Loading state (.box-solid)</h3>
        </div>
        <div class="box-body">
          这是盒子的body
        </div><!-- /.box-body -->
        <!-- Loading (remove the following to stop the loading)-->
        <div class="overlay">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">
    要模拟加载状态，只需将此代码放在<code>.box</code> 标签之前。
  </p>
  <pre class="prettyprint"><code class="html">&LT;div class="overlay">
  &LT;i class="fa fa-refresh fa-spin">&LT;/i>
&LT;/div>
</code></pre>
  <h3 id="component-direct-chat">在线聊天</h3>
  <p class="lead">直接聊天组件扩展了框组件，以创建一个美丽的聊天界面。这个小工具
由一个所需的消息窗格和一个<b>optional</b>联系人窗格。实例：</p>
  <!-- Direct Chat -->
  <div class="row">
    <div class="col-md-3">
      <!-- DIRECT CHAT PRIMARY -->
      <div class="box box-primary direct-chat direct-chat-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Direct Chat</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="Type Message ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary btn-flat">Send</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->

    <div class="col-md-3">
      <!-- DIRECT CHAT SUCCESS -->
      <div class="box box-success direct-chat direct-chat-success">
        <div class="box-header with-border">
          <h3 class="box-title">Direct Chat</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="Type Message ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-success btn-flat">Send</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->

    <div class="col-md-3">
      <!-- DIRECT CHAT WARNING -->
      <div class="box box-warning direct-chat direct-chat-warning">
        <div class="box-header with-border">
          <h3 class="box-title">Direct Chat</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="Type Message ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-warning btn-flat">Send</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->

    <div class="col-md-3">
      <!-- DIRECT CHAT DANGER -->
      <div class="box box-danger direct-chat direct-chat-danger">
        <div class="box-header with-border">
          <h3 class="box-title">Direct Chat</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="Type Message ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-danger btn-flat">Send</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">直接聊天的标记</p>
  <pre class="prettyprint"><code class="html">
&LT;!-- Construct the box with style you want. Here we are using box-danger -->
&LT;!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
&LT;!-- The contextual class should match the box, so we are using direct-chat-danger -->
&LT;div class="box box-danger direct-chat direct-chat-danger">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Direct Chat&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3&LT;/span>
      &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
      &LT;!-- In box-tools add this button if you intend to use the contacts pane -->
      &LT;button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">&LT;i class="fa fa-comments">&LT;/i>&LT;/button>
      &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    &LT;!-- Conversations are loaded here -->
    &LT;div class="direct-chat-messages">
      &LT;!-- Message. Default to the left -->
      &LT;div class="direct-chat-msg">
        &LT;div class="direct-chat-info clearfix">
          &LT;span class="direct-chat-name pull-left">Alexander Pierce&LT;/span>
          &LT;span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm&LT;/span>
        &LT;/div>&LT;!-- /.direct-chat-info -->
        &LT;img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">&LT;!-- /.direct-chat-img -->
        &LT;div class="direct-chat-text">
          Is this template really for free? That's unbelievable!
        &LT;/div>&LT;!-- /.direct-chat-text -->
      &LT;/div>&LT;!-- /.direct-chat-msg -->

      &LT;!-- Message to the right -->
      &LT;div class="direct-chat-msg right">
        &LT;div class="direct-chat-info clearfix">
          &LT;span class="direct-chat-name pull-right">Sarah Bullock&LT;/span>
          &LT;span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm&LT;/span>
        &LT;/div>&LT;!-- /.direct-chat-info -->
        &LT;img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">&LT;!-- /.direct-chat-img -->
        &LT;div class="direct-chat-text">
          You better believe it!
        &LT;/div>&LT;!-- /.direct-chat-text -->
      &LT;/div>&LT;!-- /.direct-chat-msg -->
    &LT;/div>&LT;!--/.direct-chat-messages-->

    &LT;!-- Contacts are loaded here -->
    &LT;div class="direct-chat-contacts">
      &LT;ul class="contacts-list">
        &LT;li>
          &LT;a href="#">
            &LT;img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
            &LT;div class="contacts-list-info">
              &LT;span class="contacts-list-name">
                Count Dracula
                &LT;small class="contacts-list-date pull-right">2/28/2015&LT;/small>
              &LT;/span>
              &LT;span class="contacts-list-msg">How have you been? I was...&LT;/span>
            &LT;/div>&LT;!-- /.contacts-list-info -->
          &LT;/a>
        &LT;/li>&LT;!-- End Contact Item -->
      &LT;/ul>&LT;!-- /.contatcts-list -->
    &LT;/div>&LT;!-- /.direct-chat-pane -->
  &LT;/div>&LT;!-- /.box-body -->
  &LT;div class="box-footer">
    &LT;div class="input-group">
      &LT;input type="text" name="message" placeholder="Type Message ..." class="form-control">
      &LT;span class="input-group-btn">
        &LT;button type="button" class="btn btn-danger btn-flat">Send&LT;/button>
      &LT;/span>
    &LT;/div>
  &LT;/div>&LT;!-- /.box-footer-->
&LT;/div>&LT;!--/.direct-chat -->
</code></pre>

  <p>当然，您可以通过添加类 <code>solid-box</code> 到框中直接与实体框进行聊天。这里有几个例子：</p>

  <!-- Direct Chat With Solid Boxes -->
  <div class="row">
    <div class="col-md-6">
      <!-- DIRECT CHAT WARNING -->
      <div class="box box-primary box-solid direct-chat direct-chat-primary">
        <div class="box-header">
          <h3 class="box-title">在一个实体框中直接聊天</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="Type Message ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary btn-flat">Send</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->

    <div class="col-md-6">
      <!-- DIRECT CHAT DANGER -->
      <div class="box box-info box-solid direct-chat direct-chat-info">
        <div class="box-header">
          <h3 class="box-title">Direct Chat in a Solid Box</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="Type Message ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-info btn-flat">Send</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</section>


<!-- ============================================================= -->

<section id="plugins">
  <h2 class="page-header"><a href="#plugins">插件</a></h2>
  <p class="lead">AdminLTE 使用了以下插件。对于文档、更新或许可证信息，请访问提供的链接</p>
  <div class="row bring-up">
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>Charts</h4></li>
        <li><a href="http://www.chartjs.org/" target="_blank">ChartJS</a></li>
        <li><a href="http://www.flotcharts.org/" target="_blank">Flot</a></li>
        <li><a href="http://morrisjs.github.io/morris.js/" target="_blank">Morris.js</a></li>
        <li><a href="http://omnipotent.net/jquery.sparkline/" target="_blank">Sparkline</a></li>
      </ul>
    </div><!-- /.col -->
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>Form Elements</h4></li>
        <li><a href="https://github.com/seiyria/bootstrap-slider/">Bootstrap Slider</a></li>
        <li><a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" target="_blank">Ion Slider</a></li>
        <li><a href="http://bootstrap-datepicker.readthedocs.org/" target="_blank">Date Picker</a></li>
        <li><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a></li>
        <li><a href="http://mjolnic.com/bootstrap-colorpicker/" target="_blank">Color Picker</a></li>
        <li><a href="https://github.com/jdewit/bootstrap-timepicker/" target="_blank">Time Picker</a></li>
        <li><a href="http://fronteed.com/iCheck/" target="_blank">iCheck</a></li>
        <li><a href="https://github.com/RobinHerbots/jquery.inputmask/" target="_blank">Input Mask</a></li>
      </ul>
    </div><!-- /.col -->
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>Editors</h4></li>
        <li><a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/" target="_blank">Bootstrap WYSIHTML5</a></li>
        <li><a href="http://ckeditor.com/" target="_blank">CK Editor</a></li>
      </ul>
    </div><!-- /. col -->
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>Other</h4></li>
        <li><a href="https://datatables.net/examples/styling/bootstrap.html" target="_blank">DataTables</a></li>
        <li><a href="http://fullcalendar.io/" target="_blank">Full Calendar</a></li>
        <li><a href="http://jqueryui.com/" target="_blank">jQuery UI</a></li>
        <li><a href="http://anthonyterrien.com/knob/" target="_blank">jQuery Knob</a></li>
        <li><a href="http://jvectormap.com/" target="_blank">jVector Map</a></li>
        <li><a href="http://rocha.la/jQuery-slimScroll/" target="_blank">Slim Scroll</a></li>
        <li><a href="http://github.hubspot.com/pace/docs/welcome/" target="_blank">Pace</a></li>
      </ul>
    </div><!-- /.col -->
  </div><!-- /.row -->
</section>


<!-- ============================================================= -->

<section id="upload">
  <h2 class="page-header"><a href="#upload">更新日志</a></h2>
  <p class="lead">下面是所有龙果团队的更新日志</p>
  <h3>2016-10-28</h3>
  <ul>
    <li>ajax模式中所有js和css统一在index.html引入，不再分开页面引入。</li>
    <li>ajax模式中添加tab页功能，加载页面可以加载多个，通过头部tab切换，该功能只在ajax模式中存在</li>
    <li>在实例中添加了一个table的实例，并做好了服务端的分页，table数据的处理等</li>
    <li>a标签通过添加属性<b>target=navTab</b>添加新开标签页功能，通过异步请求href连接页面，仅ajax模式可使用</li>
    <li>a标签通过添加属性<b>target="modal"</b>添加弹出层页面功能，并通过<b>modal=lg \modal=ms \ modal=""</b> 属性约定窗口大小 不设置modal属性是使用默认的大小适中的弹出层</li>
    <li>新增提示窗js功能，alertMsg（"提示内容","提示类型——default--success——warning——danger 默认为default"）</li>
    <li>优化右侧栏功能</li>
    <li></li>
  </ul>
  <h3>2016-10-17</h3>
  <ul>
    <li>/Gruntfile.js代码编译打包优化，执行 grunt 默认对less编译，对js复制处理，如果需要对js做代码质量检测，请执行grunt lint</li>
    <li>根据用户反馈，添加三个新的登录注册页面实例，可以在预览地址中左边导航的实例中预览 /pages/examples/login1.html /pages/examples/login2.html /pages/examples/login3.html</li>
  </ul>
  <h3>2016-09-30</h3>
  <p>添加在线预览地址<a href="http://demo.adminlte.roncoo.com/">demo.adminlte.roncoo.com</a></p>
  <h3>2016-09-26</h3>
  <ul>
    <li>根据我们团队的需求，增加了Ajax的布局模式。只需要在body标签里面添加.ajax-template .fixed类即可实现。</li>
    <li>增加include文件夹，用于存放ajax加载的内页文件。</li>
    <li>根目录的build文件夹增加了fonts、img、js文件夹，通过grunt编译转移到dist/目录，更利于二次开发时源码目录与编译目录区分。</li>
    <li>Gruntfile.js 添加了grunt-contrib-connect模块，装好node编译环境后，grunt即可发起服务，在浏览器输入localhost:8000即可访问，更方便二次开发。</li>
    <li>把index.html的外链的js、css和字体文件全部下载到本地的build目录下</li>
  </ul>
</section>


<!-- ============================================================= -->

<section id="browsers">
  <h2 class="page-header"><a href="#browsers">浏览器支持</a></h2>
  <p class="lead">AdminLTE 支持以下浏览器：</p>
  <ul>
    <li>IE9+</li>
    <li>Firefox (latest)</li>
    <li>Safari (latest)</li>
    <li>Chrome (latest)</li>
    <li>Opera (latest)</li>
  </ul>
  <p><b>Note:</b> IE9不支持转换或动画。模板功能正常但在IE9不会使用动画/转换。</p>
</section>


<!-- ============================================================= -->

<section id="upgrade">
  <h2 class="page-header"><a href="#upgrade">升级指南</a></h2>
  <p class="lead">从1版升级到最新版本。X，遵循本指南。</p>
  <h3>新的文件</h3>
  <p>确保你更新的所有CSS和JS有关系的AdminLTE文件。否则，布局将不会
功能正常。 最重要的文件是 AdminLTE.css, 皮肤 CSS 文件, 和 app.js.</p>
  <h3>布局的变化</h3>
  <ol>
    <li>.wrapper div must be placed immediately after the body tag rather than after the header</li>
    <li>Change the .header div to .main-header <code>&LT;div class="main-header"></code></li>
    <li>Change the .right-side class to .content-wrapper <code>&LT;div class="content-wrapper"></code></li>
    <li>Change the .left-side class to .main-sidebar <code>&LT;div class="main-sidebar"></code></li>
    <li>In the navbar, change .navbar-right to .navbar-custom-menu <code>&LT;div class="navbar-custom-menu"></code></li>
  </ol>
  <h3>导航栏的自定义下拉菜单</h3>
  <ol>
    <li>图标在通知菜单不需要 bg-* 类。 他们应该被替换与上下文的文本颜色类， 如 text-aqua 或 text-red.</li>
  </ol>
  <h3>登录，注册和锁屏页面</h3>
  <p>有重大改变的HTML标记和风格，这些页。最好的方法是复制页面的代码，并自定义它。</p>
  <p>And you should be set to go!</p>
  <h3>邮箱</h3>
  <p>邮箱升级到包括三个不同的视图。意见是收件箱，读邮件，并撰写新的电子邮件。使用这些视图，
你应该使用的页面/邮箱文件夹提供的HTML文件。</p>
  <p><b class="text-red">Note:</b> 旧邮箱布局已经在新一个忙弃用，将由下一个版本中删除。</p>
</section>


<!-- ============================================================= -->

<section id="implementations">
  <h2 class="page-header"><a href="#implementations">启动位置</a></h2>
  <p class="lead">由于许多AdminLTE用户，有多个模板的实现
为了便于集成与后端框架。以下是其中的一些：</p>

  <ul>
    <li><a href="https://github.com/mmdsharifi/AdminLTE-RTL">Persian RTL</a> by <a href="https://github.com/mmdsharifi">Mohammad Sharifi</a></li>
    <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
    <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
    <li><a href="https://github.com/acacha/adminlte-laravel" target="_blank">Laravel 5 package</a> by <a href="https://github.com/acacha" target="_blank">Sergi Tur Badenas</a></li>
    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
    <li>Rails gems: <a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">adminlte2-rails</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a> and <a href="https://github.com/racketlogger/lte-rails" target="_blank">lte-rails</a> (using AdminLTE sources) by <a href="https://github.com/racketlogger" target="_blank">Carlos at RacketLogger</a></li>
  </ul>

  <p><b class="text-red">Note:</b> these implementations are not supported by Almsaeed Studio. However,
    they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release
    of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://almsaeedstudio.com">website</a></p>
</section>


<!-- ============================================================= -->

<section id="faq">
  <h2 class="page-header"><a href="#faq">FAQ</a></h2>
  <h3>AdminLTE 可以使用WordPress?</h3>
  <p class="lead">adminlte是HTML模板，可用于任何目的。然而，它是不是可以很容易地安装WordPress。这样做将需要一些努力和足够的WordPress的脚本知识。</p>

  <h3>有PHP开发框架如Yii或symfony集成指南吗？</h3>
  <p class="lead">简短的回答，没有。但是，有 forks 和教程在网络上,提供信息如何与更多不同的框架集成。有AdminLTE与jQuery的Ajax集成如龙果集成的异步模式。</p>

  <h3>我怎么知道最新的 AdminLTE 版本?</h3>
  <p class="lead">The best option is to subscribe to our mailing list using the <a href="http://almsaeedstudio.com/#subscribe">subscription form on Almsaeed Studio</a>.
    If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE">repository on Github</a> or visit <a href="http://almsaeedstudio.com">Almsaeed Studio</a> every now and then for updates and announcements.</p>
</section>


<!-- ============================================================= -->

<section id="license">
  <h2 class="page-header"><a href="#license">许可</a></h2>
  <h3>AdminLTE</h3>
  <p class="lead">
    AdminLTE 是一个开源项目，授权在 <a href="http://opensource.org/licenses/MIT">MIT 许可</a>.
    这允许你做几乎任何你想要的东西，只要你包括“所有副本或软件的实质性部分的版权”，不需要（虽然非常欣赏）。
  </p>
</section>


        </div><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> 2.3.6
        </div>
        <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>

      <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <div class="pad">
          This is an example of the control sidebar.
        </div>
      </aside><!-- /.control-sidebar -->
      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>

    </div><!-- ./wrapper -->

    <!-- jQuery 2.2.3 -->
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/app.min.js"></script>
    <!-- SlimScroll 1.3.0 -->
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
    <script src="docs.js"></script>
  </body>
</html>
